<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./styles/bootstrap.min.css" rel="stylesheet">
    <link href="./index.css" rel="stylesheet">
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./styles/font-awesome.min.css" />
    <!-- 引入jQuery文件 -->
    <script type="text/javascript" src="bootstrap/jquery-3.3.1.min.js"></script>
    <!-- 引入bootstrap js文件 -->
    <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
    <style>
        .body2 {
            width: 60%;
        }
        /* 分页  */
        
        .type {
            margin: 30px auto;
        }
        
        .brand-logo {
            background: #fff;
        }
        /* .brand-logo ul {
            display: flex;
            padding: 0;
            background: #fff;
        }
         */
        /* .brand-logo ul li { */
        /* width: 25%; */
        /* height: 80px; */
        /* border: 1px solid #ccc; */
        /* } */
        
        .brand-logo-back {
            width: 100%;
            height: 31px;
            background: #fff;
            margin-bottom: 50px;
            background: url(images/pie3-1.png);
        }
        
        .brand-logo ul {
            display: flex;
        }
        
        .li {
            border: 1px solid rgb(236, 236, 236);
            border-radius: 10px;
            /* margin: 0 2px; */
        }
        
        .brand-logo img {
            width: 30px;
            float: left;
            margin: 10px;
        }
        
        .brand-logo p {
            margin-top: 6px;
            margin-bottom: 0px;
        }
        
        .brand-m {
            margin: 10px;
            /* padding: 0 10px; */
        }
        
        .card {
            padding: 10px;
        }
        
        .card-body {
            padding: 0;
        }
        
        .card-body h5 {
            font-size: 16px;
            font-weight: 700;
            text-align: left;
        }
        
        .card button {
            width: 80px;
            height: 30px;
            border: 0;
            color: #fff;
            background: pink;
        }
        
        .card-body-p {
            height: 20px;
            display: flex;
            margin: 10px 0;
            text-align: left;
            overflow: hidden;
        }
        
        .card-body-p p {
            color: red;
            margin-right: 8px;
        }
        
        .card-body-p span {
            font-size: 14px;
            text-align: left;
        }
    </style>
    <title>Document</title>

</head>

<body>
    <div class="container ">
        <div class="div-box">
            <div class="box box-logo col-lg-2 d-none d-lg-block">
                <img src="./images/bg-logo.png">
            </div>
            <div class="col-lg-6 col-md-8 py-5 wj_search">
                <form method="get" action="#" name="#">
                    <input type="text">
                    <button type="button"><span class="fa fa-search"></span></button>
                </form>
            </div>
            <div class="box box-a col-lg-4 col-md-4  d-none d-md-block">
                <a href="#">愿望清单</a>
                <a href="#">我的账号</a>
                <a class="gouwuche " href="#"><img src="./images/gouwuche.png"></a>
            </div>
        </div>
        <!-- tap栏 -->
        <div class="row">
            <div class="col-md-4 ">
                <div class="logo">
                    <img src="./images/logo.png">
                </div>
            </div>

            <div class="col-md-8 ">
                <nav class="navbar navbar-expand-md navbar-light ">
                    <!-- <a class="navbar-brand" href="#">Navbar</a> -->
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>


                    <!-- 给ul添加浮动 -->
                    <div class="collapse navbar-collapse  row-btn" id="navbarNavDropdown">
                        <ul class="navbar-nav  bg-light">
                            <li class="nav-item active">
                                <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">关于我们</a>
                            </li>
                            <li class="nav-item">
                                <li class="nav-item dropdown ">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
                                    所有产品
                                </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="product.html">进口产品</a>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </li>
                                <a class="nav-link  bg-light-box" href="#">相关文章</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="contact.html">联系我们</a>
                            </li>

                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
    <!-- body2 为白色背景 -->
    <div class=" body2 ">
        <div class="container">
            <!-- 特色产品 -->
            <div class="product">
                <div class="card-group">
                    <div class="card-box col-md-6 col-lg-4 ">
                        <div class="card ">
                            <img src="images/banner1.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <div class="card-body-p">
                                    <p>tch</p>
                                    <span><i class="fa fa-calendar-o" aria-hidden="true"></i>  </i>May 04 2019</span>
                                </div>

                                <h5 class="card-title">科学类玩具</h5>
                                <span>
                                    一份有价值的行业报告，可以完成对行业系统、完整的调研分析工作，
                                    使决策者在阅读完行业研究报告后，能了解该行业市场现状和前景趋势。
                                </span>

                            </div>
                            <button>了解更多</button>
                        </div>
                    </div>
                    <div class="card-box col-md-6 col-lg-4 ">
                        <div class="card ">
                            <img src="images/banner2.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <div class="card-body-p">
                                    <p>tch</p>
                                    <span><i class="fa fa-calendar-o" aria-hidden="true"></i>  </i>May 04 2019</span>
                                </div>

                                <h5 class="card-title">科学类玩具</h5>
                                <span>
                                    一份有价值的行业报告，可以完成对行业系统、完整的调研分析工作，
                                    使决策者在阅读完行业研究报告后，能了解该行业市场现状和前景趋势。
                                </span>

                            </div>
                            <button>了解更多</button>
                        </div>
                    </div>
                    <div class="card-box col-md-6 col-lg-4 ">
                        <div class="card ">
                            <img src="images/banner3.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <div class="card-body-p">
                                    <p>tch</p>
                                    <span><i class="fa fa-calendar-o" aria-hidden="true"></i>  </i>May 04 2019</span>
                                </div>

                                <h5 class="card-title">科学类玩具</h5>
                                <span>
                                    一份有价值的行业报告，可以完成对行业系统、完整的调研分析工作，
                                    使决策者在阅读完行业研究报告后，能了解该行业市场现状和前景趋势。
                                </span>

                            </div>
                            <button>了解更多</button>
                        </div>
                    </div>
                    <div class="card-box col-md-6 col-lg-4 ">
                        <div class="card ">
                            <img src="images/banner4.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <div class="card-body-p">
                                    <p>tch</p>
                                    <span><i class="fa fa-calendar-o" aria-hidden="true"></i>  </i>May 04 2019</span>
                                </div>

                                <h5 class="card-title">科学类玩具</h5>
                                <span>
                                    一份有价值的行业报告，可以完成对行业系统、完整的调研分析工作，
                                    使决策者在阅读完行业研究报告后，能了解该行业市场现状和前景趋势。
                                </span>

                            </div>
                            <button>了解更多</button>
                        </div>
                    </div>
                    <div class="card-box col-md-6 col-lg-4 ">
                        <div class="card ">
                            <img src="images/banner1.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <div class="card-body-p">
                                    <p>tch</p>
                                    <span><i class="fa fa-calendar-o" aria-hidden="true"></i>  </i>May 04 2019</span>
                                </div>

                                <h5 class="card-title">科学类玩具</h5>
                                <span>
                                    一份有价值的行业报告，可以完成对行业系统、完整的调研分析工作，
                                    使决策者在阅读完行业研究报告后，能了解该行业市场现状和前景趋势。
                                </span>

                            </div>
                            <button>了解更多</button>
                        </div>
                    </div>
                    <div class="card-box col-md-6 col-lg-4 ">
                        <div class="card ">
                            <img src="images/banner2.jpg" class="card-img-top" alt="...">
                            <div class="card-body">
                                <div class="card-body-p">
                                    <p>tch</p>
                                    <span><i class="fa fa-calendar-o" aria-hidden="true"></i>  </i>May 04 2019</span>
                                </div>

                                <h5 class="card-title">科学类玩具</h5>
                                <span>
                                    一份有价值的行业报告，可以完成对行业系统、完整的调研分析工作，
                                    使决策者在阅读完行业研究报告后，能了解该行业市场现状和前景趋势。
                                </span>

                            </div>
                            <button>了解更多</button>
                        </div>
                    </div>

                </div>

            </div>


            <!-- 分页 -->
            <div class="type">
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center ">
                        <li class="page-item disabled">
                            <a class="page-link">Previous</a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">Next</a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>

    <!-- 紫色背景 -->
    <div class="body3">
        <!-- 赞助商标 -->
        <div class="brand-logo">
            <!-- <div class="container"> -->

            <!-- </div> -->
            <div class="container">
                <div class="row">
                    <div class="brand-m col-md-5 col-lg-2 col-sm-12 li ">
                        <img src="images/齿轮组,设置,设定.png" alt="">
                        <p>免运费</p>
                        <span>质量保证</span>
                    </div>
                    <div class="brand-m col-md-5 col-lg-2 col-sm-12 li ">
                        <img src="images/纸飞机,折纸,发送.png" alt="">
                        <p>免运费</p>
                        <span>质量保证</span>
                    </div>
                    <div class="brand-m col-md-5 col-lg-2 col-sm-12 li ">
                        <img src="images/小轿车,小汽车,交通,出行.png" alt="">
                        <p>100%退款</p>
                        <span>质量保证</span>
                    </div>
                    <div class="brand-m col-md-5 col-lg-2 col-sm-12 li ">
                        <img src="images/轮船,公共交通,出行.png" alt="">
                        <p>100%退款</p>
                        <span>质量保证</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="brand-logo-back"></div>
        <!-- 页脚 -->
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-12">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h5>相关信息</h5>
                        </li>
                        <li class="list-group-item">关于我们</li>
                        <li class="list-group-item">配送信息</li>
                        <li class="list-group-item">隐私政策</li>
                        <li class="list-group-item">条款和推荐</li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-12">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h5>我的账户</h5>
                        </li>
                        <li class="list-group-item">我的账户</li>
                        <li class="list-group-item">历史订单</li>
                        <li class="list-group-item">愿望清单</li>
                        <li class="list-group-item">使用指南</li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-12">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <h5>附加</h5>
                        </li>
                        <li class="list-group-item">品牌历史</li>
                        <li class="list-group-item">更多礼券</li>
                        <li class="list-group-item">城市分会</li>
                        <li class="list-group-item">精品评价</li>
                    </ul>
                </div>
                <div class="col-md-3 col-sm-12">
                    <ul class="list-group list-group-flush">
                        <h5 class="list-group-item" style="border: 0;">联系我们</h5>
                        <div class="list-box">
                            <p><img src="images/facebook.png" alt=""></p>
                            <li>Facebook</li>
                        </div>
                        <div class="list-box">
                            <p><img src="images/google.png" alt=""></p>
                            <li>Google +</li>
                        </div>
                        <div class="list-box">
                            <p><img src="images/twitter.png" alt=""></p>
                            <li>Twitter</li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <footer>
            <div class="container">2019 Designed by tch.All rights reserved
            </div>
        </footer>
    </div>

</body>

</html>